{%- if predictive_search.performed -%}
  <div class="as-predictive-search-results d-none">
    {% assign count = 0 %}
    {%- if predictive_search.resources.products.size > 0 -%} 
      <p class="predictive-search-title">{{ 'sections.custom_search.products' | t }}</p>
      <ul class="predictive-search-content">
        {%- for product in predictive_search.resources.products limit: 5 -%}
          <li class="d-flex">
            <a {% if product.url contains 'https://' %} target="_blank" rel="nofollow" {% endif %} href="{{ product.url }}" class="stretched-link"></a>
            {%- if product.featured_image -%}
              <div class="product-img">
                <div class="product-img ratio ratio-1x1">
                  <img class="w-100 h-100 object-fit-cover" 
                    srcset="{{ product.featured_image | img_url: '64x64' }} 1x, {{ product.featured_image | img_url: '64x64', scale: 2 }} 2x"
                    src="{{ product.featured_image | img_url: '64x64' }}"
                    width="64"  
                    height="64"
                    alt="{{ product.featured_image.alt }}">
                </div>
              </div>
            {%- else -%}
              <div>{{ 'product-1' | placeholder_svg_tag: 'placeholder-svg' }}</div>
            {%- endif -%}
            <div class="product-info">
              <p class="product-title mb-0 ellipsis-1">{{ product.title | highlight: predictive_search.terms }}</p>
              <p class="mb-0 ellipsis-1 small">{{ product.first_available_variant.title }}</p>
              {% render 'price', product: product, use_variant: true, show_badges: false %} 
            </div>
          </li>
          {% assign count = count | plus: 1 %}
        {%- endfor -%}
      </ul>
    {%- endif -%}
    {%- if count < 5 and predictive_search.resources.articles.size > 0 -%}
      {%- if predictive_search.resources.products.size > 0 -%}<hr>{%- endif -%}
      <p class="predictive-search-title">{{ 'sections.custom_search.blogs' | t }}</p>
      <ul class="predictive-search-content">
        {% assign limit_num = 5 | minus: count %}
        {%- for article in predictive_search.resources.articles limit: limit_num -%}
          <li class="d-flex">
            <a class="ellipsis-1" {% if article.url contains 'https://' %} target="_blank" rel="nofollow" {% endif %}  href="{{ article.url }}">
              {{ article.title | highlight: predictive_search.terms }}
            </a>
          </li>
          {% assign count = count | plus: 1 %}
        {%- endfor -%}
      </ul>
    {%- endif -%}

    {%- if count < 5 and predictive_search.resources.pages.size > 0 -%}
      {%- if predictive_search.resources.products.size > 0 or predictive_search.resources.articles.size > 0 -%}<hr>{%- endif -%}
      <p class="predictive-search-title">{{ 'sections.custom_search.pages' | t }}</p>
      <ul class="predictive-search-content">
        {% assign limit_num = 5 | minus: count %}
        {%- for page in predictive_search.resources.pages limit: limit_num -%}
          <li class="d-flex">
            <a class="ellipsis-1" {% if page.url contains 'https://' %} target="_blank" rel="nofollow" {% endif %} href="{{ page.url }}">
              {{ page.title | highlight: predictive_search.terms }}
            </a>
          </li>
          {% assign count = count | plus: 1 %}
        {%- endfor -%}
      </ul>
    {%- endif -%}
    
    {%- if count == 0 -%}
      <ul class="predictive-search-content">
        <li class="search-for-btn">
          <button type="submit" form="search-form" class="border-0 p-0 bg-transparent w-100 ellipsis-1 d-flex justify-content-between ">  
            <span>{{ 'sections.custom_search.search_for' | t: terms: predictive_search.terms }}</span>
            <span>{% render 'icon-chevron-right' %}</span>
          </button>
        </li>
      </ul>
    {%- endif -%}
  </div>
{%- endif -%}